;
(function () {
    let myChart = echarts.init(document.querySelector('.echarts3'))

 
    let angle = 0;  
    let value = 23; 
    let option = {
        title: {
            text: `{a|${value}}{b|%}\n{c|会员人数比}`,
            x: "center",
            y: "center",
            textStyle: {
                rich: {
                    a: {
                        fontSize: 50,
                        color: "#fff",
                        fontWeight: "bold",
                    },
                    b: {
                        fontSize: 50,
                        color: "#fff",
                        fontWeight: "bold",
                    },
                    c: {
                        fontSize: 16,
                        color: "#fff",
                    },
                },
            },
        },
        series: [{
                type: "custom",
                coordinateSystem: "none",
                renderItem: function (params, api) {
                    return {
                        type: "arc",
                        shape: {
                            cx: api.getWidth() / 2,
                            cy: api.getHeight() / 2,
                            r: (Math.min(api.getWidth(), api.getHeight()) / 1.6) * 0.65,
                            startAngle: ((0 + -angle) * Math.PI) / 180,
                            endAngle: ((360 + -angle) * Math.PI) / 180,
                        },
                        style: {
                            stroke: "#ff6e1b",
                            fill: "transparent",
                            lineWidth: 1,
                        },
                        silent: true,
                    };
                },
                data: [0],
            },
            {
                type: "pie",
                radius: ["75%", "60%"],
                silent: true,
                clockwise: true,
                startAngle: 90,
                z: 0,
                zlevel: 0,
                label: {
                    normal: {
                        position: "center",
                    },
                },
                data: [{
                        value: value,
                        name: "",
                        itemStyle: {
                            normal: {
                                color: {
                                    colorStops: [{
                                            offset: 0,
                                            color: "rgb(255, 128, 0)",
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(200, 106, 255, 0.8)",
                                        },
                                    ],
                                },
                            },
                        },
                    },
                    {
                        value: 100 - value,
                        name: "",
                        label: {
                            normal: {
                                show: false,
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: 'rgba(237, 119, 55, 0.2)',
                            },
                        },
                    },
                ],
            }
        ],
    };

    myChart.setOption(option)


    window.addEventListener('resize', () => {
        myChart.resize()
    })
})()